<template>
	<view class="waterfall-item" @click="onTap(params.id)">
		<image v-if="params.picture" :src="IMG_URL+firstPicture(params.picture)" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
		<image v-else-if="params.video"  :src="IMG_URL+params.video_cover" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
		<image v-else src="/static/imgs/temp.png" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
		<view class="conts">
			<view class="infos">{{params.introduce}}</view>
			<view class="desc dis-flex flex-x-between">
				<view class="dis-flex flex-x-between flex-y-center">
					<image v-if="params.user.avatar"  :src="IMG_URL+params.user.avatar" style="width:30rpx;border-radius: 50%;height: 30rpx;" />
					<image v-else src="/static/imgs/tou.png" style="width:30rpx;" mode="widthFix"/>
					<view class="txts">{{params.user.username}}</view>
				</view>
				<view class="dis-flex flex-x-between flex-y-center">
					<image v-if="params.is_like == 1"  src="/static/imgs/xin1.png" style="width:30rpx;" mode="widthFix"/>
					<image v-else src="/static/imgs/xin.png" style="width:30rpx;" mode="widthFix"/>
					<view class="txts">{{formattedLikeNum(params.like_num)}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		IMG_URL,
	} from "../../config/app.js";
	import env from '@/utlis/env.js';
	export default {
		name:"helang-waterfall",
		props:{
			params:{
				type: Object,
				default(){
					return {}
				}
			},
			tag:{
				type:String | Number,
				default:''
			},
			index:{
				type:Number,
				default:-1
			}
		},
		data() {
			return {
				IMG_URL: IMG_URL,
			};
		},
		created() {
		},
		methods:{
			firstPicture(picture) {
			    const pictureArray = picture.split(',');
			  return pictureArray.length > 0 ? pictureArray[0] : null;
			},
			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
			emitHeight(e){
				const query = uni.createSelectorQuery().in(this);
				query.select('.waterfall-item').boundingClientRect(data => {
					let height = Math.floor(data.height);
					this.$emit("height",height,this.$props.tag);
				}).exec();
			},
			onTap(article_id){
				this.$emit("click",this.$props.index,this.$props.tag);
			},
			formattedLikeNum(likeNum) {
			      if (likeNum >= 10000 && likeNum < 1000000) {
			        // 大于等于1万小于100万，显示 x.x 万
			        return (likeNum / 10000).toFixed(1) + 'w';
			      } else {
			        // 其他情况直接显示数字
			        return likeNum.toString();
			      }
			},

		}
	}
</script>

<style lang="scss" scoped>
.waterfall-item{
	padding: 16rpx;
	background-color: #fff;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 20rpx;
	border-radius: 24rpx;
  border: 1px solid rgba(0,0,0,0.13);
	
	image{
		display: block;
		width: 100%;
		// 默认设置一个图片的大约值
		height: 350rpx;
	}
	
	.conts{
		.infos {
			font-weight: bold;
		  font-size: 28rpx;	
			color: $uni-text-color;
			line-height: 40rpx;
			margin:26rpx 0 22rpx;
			display: -webkit-box;
			  -webkit-box-orient: vertical;
			  overflow: hidden;
			  /* 设置要显示的行数 */
			  -webkit-line-clamp: 1; /* 这里设置为 2 表示最多显示两行 */
		}
		.txts {
			font-size: 26rpx;
			color: $uni-text-color-primary;
			margin-left: 10rpx;
		}
	}
}
</style>
